<template>
  <el-menu-item :index="action.path || uniqueId">
    <span slot="title">
      <div class="box">
        <div class="item">
          <i v-if="action.icon" :class="`fa fa-${action.icon}`" />
          <i v-if="action.iconEle" :class="`el-icon-${action.iconEle}`" />
          <svg-icon v-if="action.iconSvg" :icon-class="action.iconSvg" />
          &nbsp;{{ action.title || '未命名菜单' }}
        </div>
        <div v-if="action.shortkey" class="item right-align">{{ action.shortkey || '×' }}</div>
      </div>
    </span>

    <!-- style="text-decoration:underline;" -->
  </el-menu-item>
</template>

<script>
import { uniqueId as _uniqueId } from 'lodash'
export default {
  props: {
    action: {
      type: Object,
      required: false,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      uniqueId: _uniqueId('d2-menu-empty-')
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.item {
  flex: 1;
}
.right-align {
  text-align: right;
}
</style>
